<template>
  <view class="about-container">
    <view class="header-section text-center">
      <image style="width: 150rpx;height: 150rpx;" src="/static/logo2.png" mode="widthFix">
      </image>
      <uni-title type="h2" title="服务跟踪系统"></uni-title>
    </view>

    <view class="content-section">
      <view class="menu-list">
        <view class="list-cell list-cell-arrow">
          <view class="menu-item-box">
            <view>版本信息</view>
            <view class="text-right">v{{version}}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow">
          <view class="menu-item-box">
            <view>官方邮箱</view>
            <view class="text-right">1176953184@qq.com</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow">
          <view class="menu-item-box">
            <view>服务热线</view>
            <view @click="$commonFn.dial('15229321859')" class="text-right phone">152 2932 1859</view>
          </view>
        </view>

      </view>
    </view>

    <view class="copyright">
      <view>Copyright &copy; 2025 驰锐科技 All Rights Reserved.</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
       
        version: '1.0.0'
      }
    }
  }
</script>

<style lang="scss" scoped>
 page {
   background-color: #f8f8f8;
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
 }
 
 .about-container {
   padding: 30rpx 20rpx;
   box-sizing: border-box;
 }
 
 .header-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30rpx 0 40rpx;
 }
 
 .header-section image {
   width: 150rpx;
   height: 150rpx;
   border-radius: 16rpx; // 增加圆角，让logo更柔和
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); // 轻微阴影增强立体感
 }
 
 .uni-title {
   margin-top: 20rpx;
   font-weight: 600;
   color: #333;
 }
 
 .content-section {
   background-color: #fff;
   border-radius: 16rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
   overflow: hidden; // 配合圆角裁剪内部元素
 }
 
 .menu-list {
   .list-cell {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30rpx 30rpx;
     border-bottom: 1rpx solid #eee;
 
     &:last-child {
       border-bottom: none;
     }
 
     &.list-cell-arrow {
       position: relative;
 
       // &::after {
       //   content: "";
       //   position: absolute;
       //   right: 30rpx;
       //   top: 50%;
       //   transform: translateY(-50%);
       //   width: 16rpx;
       //   height: 16rpx;
       //   border-right: 2rpx solid #999;
       //   border-bottom: 2rpx solid #999;
       //   transform: translateY(-50%) rotate(45deg);
       //   opacity: 0.6;
       // }
     }
   }
 
   .menu-item-box {
     width: 100%;
     display: flex;
     justify-content: space-between;
 
     view {
       &:first-child {
         color: #666;
         font-size: 28rpx;
       }
 
       &.text-right {
         color: #333;
         font-size: 28rpx;
 
         &.phone {
           color: #2e7dfa; // 手机号用蓝色突出
         }
       }
     }
   }
 }
 
 .copyright {
   margin-top: 60rpx;
   text-align: center;
   line-height: 60rpx;
   color: #999;
   font-size: 24rpx;
 }
</style>
